<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="118px">
      <el-form-item label="排查计划名称" prop="planName">
        <el-input v-model="queryParams.planName" placeholder="请输入排查计划名称" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="planState">
        <el-radio-group v-model="queryParams.planState">
          <el-radio label="0">未开始</el-radio>
          <el-radio label="1">执行中</el-radio>
          <el-radio label="2">已中止</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <!--<el-table-column label="主键" align="center" prop="id" />-->
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="计划名称" align="center" prop="planName" />
      <el-table-column label="排查周期" align="center" prop="checkPeriod">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.HT_CHECKPERIOD" :value="scope.row.checkPeriod" />
        </template>
      </el-table-column>
      <el-table-column label="组织级别" align="center" prop="orgLevel">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.HT_ORGLEVEL" :value="scope.row.orgLevel" />
        </template>
      </el-table-column>
      <el-table-column label="开始时间" align="center" prop="startDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排查类型" align="center" prop="checkType">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.HT_CHECKTYPE" :value="scope.row.checkType" />
        </template>
      </el-table-column>
      <el-table-column label="排查属性" align="center" prop="checkProperty">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.HT_CHECKPROPERTY" :value="scope.row.checkProperty" />
        </template>
      </el-table-column>
      <el-table-column label="排查人" align="center" prop="checkPeo">
      </el-table-column>
      <el-table-column label="任务状态" align="center" width="120" prop="planState">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.HT_PLANSTATE" :value="scope.row.planState" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="130" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)" v-if="scope.row.planState=='0'">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleSuspend(scope.row)" v-if="scope.row.planState=='1'">中止</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 新增计划 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划名称" prop="planName">
              <el-input v-model="form.planName" placeholder="请输入计划名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐患类别" prop="htCategory">
              <el-select style="width: 100%;" v-model="form.htCategory" placeholder="请选择隐患类别">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_CATEGORY)" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排查类型" prop="checkType">
              <el-select v-model="form.checkType" placeholder="请选择排查类型" style="width: 100%;">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_CHECKTYPE)" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排查周期" prop="checkPeriod">
              <el-select v-model="form.checkPeriod" placeholder="请选择排查周期" style="width: 100%;">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_CHECKPERIOD)" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排查属性" prop="checkProperty">
              <el-select v-model="form.checkProperty" placeholder="请选择排查属性" style="width: 100%;">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_CHECKPROPERTY)" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织级别" prop="orgLevel">
              <el-select v-model="form.orgLevel" placeholder="请选择组织级别" style="width: 100%;">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_ORGLEVEL)" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker style="width: 100%;" v-model="form.startDate" type="date" placeholder="选择日期" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker style="width: 100%;" v-model="form.endDate" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排查人" prop="checkPeoId">
              <el-select style="width: 100%;" v-model="form.checkPeoId" placeholder="请选择排查人" @change="setDirectPerson">
                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname"
                  :value="parseInt(item.id)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划状态" prop="planState">
              <el-select style="width: 100%;" v-model="form.planState" disabled="">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.HT_PLANSTATE)" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="display: flex;">
            <el-form-item label="排查项目" prop="riskPoints">
              <el-input-number v-model="form.riskPoints" placeholder="请选择排查项目" min="1" readonly @click="openObject" disabled=""/>
            </el-form-item>
            <i class="el-icon-circle-plus-outline" style="font-size: 25px;margin:5px;" @click="openObject"></i>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="loading1" :data="list1">
        <!--<el-table-column label="主键" align="center" prop="id" />-->
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="所属风险点" align="center" prop="riskPoint" />
        <el-table-column label="风险等级" align="center" prop="riskLevel" width="180">
          <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.RISK_LEVEL" :value="scope.row.riskLevel" />
          </template>
        </el-table-column>
        <el-table-column label="危险源名称" align="center" prop="hazardSource" />
        <el-table-column label="管控措施" align="center" prop="controlMeasures">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      <el-dialog title="排查项目" :visible.sync="showObject" width="900px" append-to-body>
        <!-- 搜索工作栏 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="118px">
          <el-row>
          <el-form-item label="风险点名称" prop="riskPoint">
            <el-input v-model="queryParams1.riskPoint" placeholder="请输入风险点名称" clearable size="small"
                      @keyup.enter.native="handleQuery1" />
          </el-form-item>
          <el-form-item label="风险点责任人" prop="directPersonId">
              <el-select style="width: 100%;" v-model="queryParams1.directPersonId" placeholder="请选择风险点责任人" clearable>
                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname"
                           :value="parseInt(item.id)" />
            </el-select>
          </el-form-item>
          <!--<el-form-item label="风险点责任单位" prop="responsibleId">-->
            <!--<treeselect style="width: 33%;" v-model="queryParams1.responsibleId" :options="responsibleDeptOptions"-->
                        <!--:show-count="true" placeholder="请选择风险点责任单位" :normalizer="normalizer" />-->
          <!--</el-form-item>-->
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">查询</el-button>
            <!--<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
          </el-row>
        </el-form>
        <el-table ref="multipleTable" tooltip-effect="dark" v-loading="loading2" :data="list2" height="450" @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="序号"  type="index" width="80"/>
          <el-table-column label="风险点名称" align="center" prop="riskPoint" />
          <el-table-column label="风险等级" align="center" prop="riskLevel">
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.RISK_LEVEL" :value="scope.row.riskLevel" />
            </template>
          </el-table-column>
          <el-table-column label="危险源名称" align="center" width="110" prop="hazardSource" />
          <el-table-column label="责任单位" align="center" prop="companyName" />
          <el-table-column label="责任人" align="center" prop="directPerson" />
          <el-table-column label="管控措施" align="center"  prop="controlMeasures">
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <!--<pagination v-show="total1 > 0" :total="total1" :page.sync="queryParams1.pageNo" :limit.sync="queryParams1.pageSize"-->
                    <!--@pagination="getList1" />-->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirm">确 定</el-button>
          <el-button @click="showObject=false">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>

  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import {
    updateHtHiddentroublePlan,
    getHtHiddentroublePlan,
    getHtHiddenPlanPage,
    createHtHiddenPlan,
    getRiskInfoList
  } from "@/api/biz/htHiddenFormulate";
  import {
    listSimpleUsers
  } from "@/api/system/user";
  import {
    listSimpleDepts
  } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import ElCheckbox from "../../../../node_modules/element-ui/packages/checkbox/src/checkbox.vue";
  import ElInputNumber from "../../../../node_modules/element-ui/packages/input-number/src/input-number.vue";
  export default {
    name: "htHiddenFormulate",
    components: {
      ElInputNumber,
      ElCheckbox,
      ElRow,
      Treeselect
    },
    data() {
      return {
        pickerOptions:{
        disabledDate(time){
          return time.getTime() < Date.now();
        }
      },
        // 遮罩层
        loading: false,
        loading1: false,
        loading2: false,
        showObject: false,
        users: [],
        // 导出遮罩层
        exportLoading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        //风险点总条数
        total:0,
        currentRowId: null,
        // 隐患信息列表
        list: [],
        list1: [],
        list2: [],
        riskList:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        openDetail: false,
        dateRangeCheckDate: [],
        multipleSelection: [],
        responsibleDeptOptions:[],
        // 查询参数
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          planState:'1',
        },
        // 查询参数
        queryParams1: {
          pageNo: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {
        },
        // 表单校验
        rules: {
          planName: [{
            required: true,
            message: "计划名称不能为空",
            trigger: "blur"
          }],
          checkPeriod: [{
            required: true,
            message: "排查周期不能为空",
            trigger: "change"
          }],
          htCategory: [{
            required: true,
            message: "隐患类别不能为空",
            trigger: "change"
          }],
          orgLevel: [{
            required: true,
            message: "组织级别不能为空",
            trigger: "change"
          }],
          startDate: [{
            required: true,
            message: "开始时间不能为空",
            trigger: "change"
          }],
          endDate: [{
            required: true,
            message: "结束时间不能为空",
            trigger: "change"
          }],
          checkType: [{
            required: true,
            message: "排查类型不能为空",
            trigger: "change"
          }],
          checkProperty: [{
            required: true,
            message: "排查属性不能为空",
            trigger: "change"
          }],
          checkPeoId: [{
            required: true,
            message: "排查人不能为空",
            trigger: "change"
          }],
          planState: [{
            required: true,
            message: "计划状态不能为空",
            trigger: "change"
          }],
          riskPoints: [{
            required: true,
            message: "排查项目不能为空",
//            trigger: "change"
          }],
        }
      };
    },
    created() {
      this.getList();
      this.getTreeselect();
      // 获得用户列表
      listSimpleUsers().then(response => {
        this.users = response.data;
      });
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true;
        // 处理查询参数
        let params = {
          ...this.queryParams
        };
        // 执行查询
        getHtHiddenPlanPage(params).then(response => {
          this.list = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      // 切换单选框
      changeRedio(event, row) {
        if(this.riskList.length>0){
          this.list1=this.riskList
        }else{
          this.list1=[]
        }
        this.currentRowId = event;
        this.list1.push(row)
      },
     //切换多选
      handleSelectionChange(val) {
       this.multipleSelection=val;
      },

      confirm(){
        this.showObject=false;
        var list=[];
        if(this.multipleSelection.length>0){
          list=this.list1.concat(this.multipleSelection)
          this.list1=list;
        }
        this.form.riskPoints=this.list1.length;
      },
      // 查看详情
      handleDetail(row) {
        const id = row.id;
        getHtHiddentroublePlan(id).then(response => {
          this.form = response.data;
          this.list1=this.form.riskList;
          this.riskList=this.form.riskList;
          this.form.riskPoints=this.list1.length;
          this.open = true;
          this.title = "修改计划"
        });
      },
      handleSuspend(row){
        const id = row.id;
        this.$modal.confirm('是否确认中止计划名称为"' + row.planName + '"的数据项?').then(function() {
          let form={id:row.id,planName:row.planName,planState:'3'}
          return updateHtHiddentroublePlan(form);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("中止成功");
        }).catch(() => {});
      },
      //新增
      handleAdd() {
        this.form = {}
        this.resetForm("form");
        this.list1=[];
        this.open = true
        this.form.planState='0'
        this.title = "新增计划"
      },
      /** 取消按钮 */
      cancel() {
        this.open = false;
      },
      cancelDetail() {
        this.openDetail = false;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNo = 1;
        this.getList();
      },
      /** 风险点搜索按钮操作 */
      handleQuery1() {
        this.queryParams1.pageNo = 1;
        this.getList1();
        this.getTreeselect();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      //排查项目弹窗
      openObject() {
        this.showObject = true;
        this.loading2=true
        var that=this;
        that.list2=[];
        getRiskInfoList(that.queryParams1).then(response => {
          var list=response.list
          var controlTotal=0;
          list.forEach(function (risk,index) {
            var hazardSourceList=risk.hazardSourceList;
            hazardSourceList.forEach(function(hazard,idx1){
              var controlMeasureList=hazard.controlMeasureList;
              if(controlMeasureList.length>0){
                controlTotal +=controlMeasureList.length;
              }
              controlMeasureList.forEach(function(control,idx2){
                let isExist=false;
                that.list1.forEach(function(item,ii){
                    if(item.controlId==control.id){
                      isExist=true;
                      return;
                    }
                });
                if(isExist){
                  return;
                }
                var riskObj={};//行对象
                //风险点
                riskObj.riskPoint=risk.riskPoint;
                riskObj.companyName=risk.companyName;
                riskObj.directPerson=risk.directPerson;
                //危险源
                riskObj.hazardSource=hazard.hazardEvent;
                riskObj.riskId=hazard.riskId;
                riskObj.hazardId=hazard.id;
                riskObj.riskLevel=hazard.riskLevel;
                //管控措施
                riskObj.controlMeasures=control.controlMeasures;
                riskObj.controlId=control.id;

                that.list2.push(riskObj);
              });
            });
          });
          that.total1=controlTotal;
          this.loading2=false
        });
      },
      getList1(){
//        this.showObject = true;
        this.loading2=true
        var that=this;
        that.list2=[];
        getRiskInfoList(that.queryParams1).then(response => {
          var list=response.list
          var controlTotal=0;
          list.forEach(function (risk,index) {
            var hazardSourceList=risk.hazardSourceList;
            hazardSourceList.forEach(function(hazard,idx1){
              var controlMeasureList=hazard.controlMeasureList;
              if(controlMeasureList.length>0){
                controlTotal +=controlMeasureList.length;
              }
              controlMeasureList.forEach(function(control,idx2){
                var riskObj={};//行对象
                //风险点
                riskObj.riskPoint=risk.riskPoint;
                riskObj.companyName=risk.companyName;
                riskObj.directPerson=risk.directPerson;
                //危险源
                riskObj.hazardSource=hazard.hazardEvent;
                riskObj.riskId=hazard.riskId;
                riskObj.hazardId=hazard.id;
                riskObj.riskLevel=hazard.riskLevel;
                //管控措施
                riskObj.controlMeasures=control.controlMeasures;
                riskObj.controlId=control.id;

                that.list2.push(riskObj);
              });
            });
          });
          that.total1=controlTotal;
          this.loading2=false
        });
      },
      changeRadio(e) {
        console.log(e)
      },
      setDirectPerson(chekPersonId){
        this.queryParams1.directPersonId=chekPersonId;
      },
      /** 查询部门下拉树结构 + 人员下拉 */
      getTreeselect() {
        listSimpleDepts().then(response => {
          //风险点责任部门
          this.responsibleDeptOptions = [];
          this.responsibleDeptOptions.push(...this.handleTree(response.data, "id"));
        });
      },
      // 格式化部门的下拉框
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (!valid) {
            return;
          }
          this.form.planDetail=this.list1;
          // 修改的提交
          if (this.form.id != null) {
            updateHtHiddentroublePlan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
            return;
          }
          // 添加的提交
          createHtHiddenPlan(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          });
        });

      },
    }
  };
</script>
<style scoped>
</style>
